<template>
    <div class="searchPageWrap">
  
    <div class="wrap">
    <div class="inputWrap">
    <uni-icons type="search" class="searchIcon" size="26"></uni-icons>
    <input type="text" v-model="search" placeholder="请输入搜索内容">
    </div>
    <div class="btn" @click="goList">
        搜索
    </div>
       </div>
    <div class="historyWrap">
    <view>最近搜索</view>
    <uni-icons type="trash-filled" size="30" @click="removeTagList"></uni-icons>
    </div>
    <div class="tagWrap">
     <span class="tagItem" v-for="(item,index) of tagList" :key="index" @click="handleTag(item)">
       {{item}}
     </span>
    </div>
    </div>
</template>

<script>
const key='searchTagList'
    export default {
         data() {
            return {
                search:'',
                tagList:[]
            };
         },
       onLoad() {
       this.tagList=uni.getStorageSync(key)||[]
       },
       methods: {
       handleTag(item){
          uni.navigateTo({ url: '/subpackg_1/goodsList/index?search='+item})
        },
        goList(){
          if(this.search.trim()==='')return this.$msg('请输入搜索内容')
          this.tagList.unshift(this.search)
          this.tagList=[...new Set(this.tagList)]
          uni.setStorageSync(key, this.tagList)
         uni.navigateTo({ url: '/subpackg_1/goodsList/index?search='+this.search})
        },
        removeTagList(){
           uni.removeStorageSync(key)
           this.tagList=[]
        }
       }
    }
</script>

<style lang="scss" scoped>
.searchPageWrap{
    padding: 24rpx;
    height: 100vh;
    background: #f7f7f7;
}
.wrap{
    height:80rpx;
    display: flex;
    .btn{
        width: 140rpx;
       background-color: #fa2209;
       color: #fff;
       border-radius: 0 20rpx 20rpx 0;
       text-align: center;
       line-height: 80rpx;
    }
}
.inputWrap{
  border-radius:20rpx 0 0 20rpx;
  background-color: #fff;
    height: 80rpx;
    width: 560rpx;
    padding-left: 80rpx;
    position: relative;
    .searchIcon{
        position: absolute;
        left: 10rpx;
        top: 10rpx;
        color: #f7f7f7 !important;
    }
    input{
       height: 100%;
       width: 100%;
       
    }
}
.historyWrap{
    padding-top: 40rpx;
 display: flex;
 justify-content: space-between;
 height: 120rpx;
}
.tagWrap{
    display: flex;
    flex-wrap: wrap;
    height:600rpx;
    align-content: flex-start;
}
.tagItem{
    padding: 0 50rpx;
    height: 60rpx;
    background: #fff;
    font-size: 28rpx;
    line-height: 60rpx;
    border-radius:30rpx ;
    margin-right: 20rpx;
    margin-top: 20rpx;
}
// .uni-easyinput{
// width: 300rpx;
// }
</style>
